<template>
	<view class="transfer-page">
		<!-- 转赠对象手机号 -->
		<view class="phone-section">
			<text class="section-label">转赠对象手机号：</text>
			<view class="phone-input-wrapper">
				<input 
					v-model="phoneNumber" 
					class="phone-input" 
					type="number" 
					placeholder="请输入手机号"
					maxlength="11"
				/>
				<view class="search-btn" @click="searchUser">
					<text>搜索</text>
				</view>
			</view>
		</view>
		
		<!-- 用户信息卡片 -->
		<view v-if="targetUser" class="user-card">
			<image :src="targetUser.avatar" class="user-avatar"></image>
			<view class="user-info">
				<text class="user-name">{{ targetUser.nickname }}</text>
				<!-- <text class="user-register-time">注册时间：{{ targetUser.registerTime }}</text> -->
			</view>
		</view>
		
		<!-- 转赠积分输入 -->
		<view v-if="targetUser" class="transfer-section">
			<view class="section-header">
				<text class="section-label">转赠积分</text>
				<text class="balance-text">当前余额：{{ currentBalance }}积分</text>
			</view>
			<view class="transfer-input-wrapper">
				<input 
					v-model="transferAmount" 
					class="transfer-input" 
					type="number" 
					placeholder="请输入转赠积分"
					@input="onTransferAmountInput"
				/>
			</view>
		</view>
		
		<!-- 确认转赠按钮 -->
		<view 
			v-if="targetUser" 
			class="confirm-btn" 
			:class="{ disabled: !canConfirmTransfer }"
			@click="confirmTransfer"
		>
			<text>确认转赠</text>
		</view>
		
		<!-- 转赠确认弹窗 -->
		<wd-popup v-model="showConfirmModal" custom-style="border-radius:32rpx;" position="center" :safe-area-inset-bottom="true">
			<view class="confirm-modal">
				<view class="modal-header">
					<text class="modal-title">确认转赠</text>
				</view>
				<view class="modal-content">
					<view class="transfer-info">
						<view class="info-row">
							<text class="info-label">转赠对象：</text>
							<text class="info-value">{{ targetUser?.nickname }}</text>
						</view>
						<view class="info-row">
							<text class="info-label">手机号：</text>
							<text class="info-value">{{ phoneNumber }}</text>
						</view>
						<view class="info-row">
							<text class="info-label">转赠积分：</text>
							<text class="info-value highlight">{{ transferAmount }}</text>
						</view>
					</view>
				</view>
				<view class="modal-actions">
					<view class="action-btn cancel" @click="showConfirmModal = false">
						<text>取消</text>
					</view>
					<view class="action-btn confirm" @click="executeTransfer">
						<text>确认</text>
					</view>
				</view>
			</view>
		</wd-popup>
		
		<!-- 转赠成功弹窗 -->
		<!-- <wd-popup v-model="showSuccessModal" position="center" :safe-area-inset-bottom="true">
			<view class="success-modal">
				<view class="success-icon">
					<wd-icon name="check-circle" size="60px" color="#52c41a"></wd-icon>
				</view>
				<text class="success-title">转赠成功</text>
				<text class="success-desc">您已成功转赠 {{ transferAmount }} 积分给 {{ targetUser?.name }}</text>
				<view class="success-btn" @click="goBackToIntegral">
					<text>确定</text>
				</view>
			</view>
		</wd-popup> -->
	</view>
	<fui-loading type="col" v-if="loadActive" :isFixed="true" :isMask="true"></fui-loading>
</template>

<script setup>
	// 响应式数据
	const phoneNumber = ref('')
	const transferAmount = ref('')
	const targetUser = ref(null)
	const showConfirmModal = ref(false)
	const showSuccessModal = ref(false)
	const loadActive = ref(false)
	const currentBalance = ref(0) // 当前积分余额
	// 计算属性：是否可以确认转赠
	const canConfirmTransfer = computed(() => {
		const amount = parseInt(transferAmount.value)
		return targetUser.value && 
			   transferAmount.value && 
			   !isNaN(amount) &&
			   amount > 0 && 
			   amount <= currentBalance.value
	})
	
	// 获取当前积分余额
	const getCurrentBalance = async () => {
		try {
			const res = await uni.api.myIntegral()
			if (res.code === 0) {
				currentBalance.value = res.data?.surplusIntegral || 0
			}
		} catch (error) {
			console.error('获取积分余额失败:', error)
		}
	}
	
	// 页面加载
	onLoad(() => {
		getCurrentBalance()
	})
	
	// 搜索用户
	const searchUser = async () => {
		if (!phoneNumber.value) {
			uni.showToast({
				title: '请输入手机号',
				icon: 'none'
			})
			return
		}
		
		if (phoneNumber.value.length !== 11) {
			uni.showToast({
				title: '请输入正确的手机号',
				icon: 'none'
			})
			return
		}
		
		const res = await uni.api.queryUsersEntity({telephone:phoneNumber.value});
		if(res.code == 0){
			targetUser.value = res.data || {};
		}else{
			uni.showToast({
				title: '用户查找失败',
				icon: 'none'
			})
		}
	}
	
	// 处理转赠积分输入
	const onTransferAmountInput = (e) => {
		let value = e.detail.value
		
		// 只允许输入数字
		value = value.replace(/[^\d]/g, '')
		
		// 检查是否超过余额
		const amount = parseInt(value)
		if (!isNaN(amount) && amount > currentBalance.value) {
			uni.showToast({
				title: `转赠积分不能超过当前余额`,
				icon: 'none'
			})
			value = Math.floor(currentBalance.value).toString()
		}
		
		// 检查是否为有效的正数
		if (value && !isNaN(parseInt(value)) && parseInt(value) <= 0) {
			value = ''
		}
		nextTick(() => {
			transferAmount.value = value
		})
	}
	
	// 确认转赠
	const confirmTransfer = () => {
		if (!canConfirmTransfer.value) {
			return
		}
		
		const amount = parseInt(transferAmount.value)
		if (isNaN(amount) || amount > currentBalance.value) {
			uni.showToast({
				title: `转赠积分不能超过当前余额`,
				icon: 'none'
			})
			return
		}
		
		showConfirmModal.value = true
	}
	
	// 执行转赠
	const executeTransfer = async () => {
		showConfirmModal.value = false
		try {
			uni.showLoading({
				title: '转赠中...'
			})
			
			const res = await uni.api.integralGift({
				giftUserId: targetUser.value.id,
				integral: parseInt(transferAmount.value)
			})
			
			uni.hideLoading()
			
			if (res.code === 0) {
				uni.showToast({
					title: '转赠成功',
					icon: 'success'
				})
				
				// 刷新余额
				await getCurrentBalance()
				// 重置表单
				phoneNumber.value = ''
				transferAmount.value = ''
			} else {
				uni.showToast({
					title: res.message || '转赠失败',
					icon: 'none'
				})
			}
		} catch (error) {
			uni.hideLoading()
			uni.showToast({
				title: '转赠失败，请重试',
				icon: 'none'
			})
		}
	}
	
	// 返回积分页面
	const goBackToIntegral = () => {
		showSuccessModal.value = false
		uni.navigateBack()
	}
</script>

<style lang="scss">
	.transfer-page {
		min-height: 100vh;
		background: #f5f5f5;
		padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
	}
	.phone-section {
		background: #ffffff;
		padding: 40rpx 32rpx;
		margin-top: 20rpx;
		
		.section-label {
			display: block;
			font-size: 32rpx;
			color: #333;
			margin-bottom: 24rpx;
			
		}
		
		.phone-input-wrapper {
			display: flex;
			align-items: center;
			gap: 20rpx;
			
			.phone-input {
				flex: 1;
				height: 80rpx;
				padding: 0 24rpx;
				background: #f8f8f8;
				border-radius: 12rpx;
				font-size: 32rpx;
				color: #333;
			}
			
			.search-btn {
				padding: 8rpx 32rpx;
				background: #000000;
				border-radius: 32rpx;
				
				text {
					color: #ffffff;
					font-size: 28rpx;
				}
			}
		}
	}
	
	.user-card {
		background: #ffffff;
		margin: 20rpx 32rpx;
		padding: 32rpx;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		gap: 24rpx;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
		
		.user-avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			background: #f0f0f0;
		}
		
		.user-info {
			flex: 1;
			
			.user-name {
				display: block;
				font-size: 32rpx;
				color: #333;
				font-weight: 500;
				margin-bottom: 8rpx;
			}
			
			.user-register-time {
				font-size: 24rpx;
				color: #999;
			}
		}
	}
	
	.transfer-section {
		background: #ffffff;
		padding: 40rpx 32rpx;
		margin-top: 20rpx;

		.section-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 24rpx;
			
			.section-label {
				font-size: 32rpx;
				color: #333;
			}
			
			.balance-text {
				font-size: 28rpx;
				color: #666;
			}
		}
		
		.transfer-input-wrapper {
			display: flex;
			align-items: center;
			gap: 20rpx;
			
			.transfer-input {
				flex: 1;
				height: 80rpx;
				padding: 0 24rpx;
				background: #f8f8f8;
				border-radius: 12rpx;
				font-size: 32rpx;
				color: #333;
			}
		}
	}
	
	.confirm-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		margin: 0 32rpx;
		padding:18rpx 32rpx;
		background: #000000;
		border-radius: 16rpx 16rpx;
		text-align: center;
		// margin-bottom: calc(32rpx + env(safe-area-inset-bottom));
		z-index: 100;
		
		&.disabled {
			background: #cccccc;
			
			text {
				color: #999999;
			}
		}
		
		text {
			color: #ffffff;
			font-size: 32rpx;
			font-weight: 500;
		}
	}
	
	.confirm-modal {
		background: #ffffff;
		border-radius: 20rpx;
		padding: 40rpx;
		width: 600rpx;
		
		.modal-header {
			text-align: center;
			margin-bottom: 40rpx;
			
			.modal-title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
			}
		}
		
		.modal-content {
			.transfer-info {
				.info-row {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 20rpx 0;
					border-bottom: 1px solid #f0f0f0;
					
					&:last-child {
						border-bottom: none;
					}
					
					.info-label {
						font-size: 28rpx;
						color: #666;
					}
					
					.info-value {
						font-size: 28rpx;
						color: #333;
						
						&.highlight {
							color: #ff4757;
							font-weight: bold;
						}
					}
				}
			}
		}
		
		.modal-actions {
			display: flex;
			gap: 20rpx;
			margin-top: 40rpx;
			
			.action-btn {
				flex: 1;
				padding: 24rpx;
				border-radius: 12rpx;
				text-align: center;
				
				&.cancel {
					background: #f8f8f8;
					
					text {
						color: #666;
						font-size: 32rpx;
					}
				}
				
				&.confirm {
					background: #000000;
					
					text {
						color: #ffffff;
						font-size: 32rpx;
					}
				}
			}
		}
	}
	
	.success-modal {
		background: #ffffff;
		border-radius: 20rpx;
		padding: 60rpx 40rpx 40rpx;
		width: 600rpx;
		text-align: center;
		
		.success-icon {
			margin-bottom: 32rpx;
		}
		
		.success-title {
			display: block;
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 16rpx;
		}
		
		.success-desc {
			display: block;
			font-size: 28rpx;
			color: #666;
			line-height: 1.6;
			margin-bottom: 40rpx;
		}
		
		.success-btn {
			padding: 24rpx 60rpx;
			background: #000000;
			border-radius: 12rpx;
			display: inline-block;
			
			text {
				color: #ffffff;
				font-size: 32rpx;
			}
		}
	}
</style>